<template>
  <div>
    <header>
      <span @click="goback">
        <svg
          t="1631347638488"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5270"
          width="200"
          height="200"
        >
          <path
            d="M673.450667 113.322667L302.762667 484.181333l-2.218667 2.56-1.877333 1.365334a30.378667 30.378667 0 0 0-8.533334 22.528V513.536a30.208 30.208 0 0 0 8.533334 22.357333l1.877333 1.365334 2.218667 2.56 370.688 370.858666a34.133333 34.133333 0 1 0 47.786666-47.786666L370.176 512 721.237333 161.109333a36.864 36.864 0 0 0 3.925334-51.2 36.864 36.864 0 0 0-51.712 3.413334z"
            fill="#B3B3B3"
            p-id="5271"
          ></path>
        </svg>
      </span>
      <span class="nameheader">{{ $route.query.title }}</span>
      <span> </span>
    </header>
    <div class="heng">
      <p class="posi">
        <!-- 分类 -->
        <section class="fenlei" v-if="bool" @click="dessert">
        <span>{{ $route.query.title }}</span>
        <span class="san">
          <svg t="1631348286273" class="icon" viewBox="0 0 2048 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6483" width="200" height="200"><path d="M1024 1024L0 0h2048z" fill="#999999" p-id="6484"></path></svg>
        </span>
        </section>
        <!-- 美食 -->
        <section v-if="!bool" @click="classify">
        <span  class="classifyBlue">分类</span>
        <span>
          <svg t="1631348466043" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11978" width="200" height="200"><path d="M87.3472 812.1344h835.072L525.4144 323.072 87.3472 812.1344z" fill="#1492FF" p-id="11979"></path></svg>
        </span>
        </section>
        <section>
        <span @click="sort" :class="{ bluecolor: blue }">排序</span>
          <svg v-if="!blue" t="1631348286273" class="icon" viewBox="0 0 2048 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6483" width="200" height="200"><path d="M1024 1024L0 0h2048z" fill="#999999" p-id="6484"></path></svg>
          <svg v-if="blue" t="1631348466043" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11978" width="200" height="200"><path d="M87.3472 812.1344h835.072L525.4144 323.072 87.3472 812.1344z" fill="#1492FF" p-id="11979"></path></svg>
        </section>
        <section @click="sift" :class="{ bluecolor: express }">
          <span>筛选</span>
          <span>
          <svg v-if="!express" t="1631348286273" class="icon" viewBox="0 0 2048 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6483" width="200" height="200"><path d="M1024 1024L0 0h2048z" fill="#999999" p-id="6484"></path></svg>
          <svg v-if="express" t="1631348466043" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11978" width="200" height="200"><path d="M87.3472 812.1344h835.072L525.4144 323.072 87.3472 812.1344z" fill="#1492FF" p-id="11979"></path></svg>
          </span>
        </section>
      
      </p>
      <section class="classify" v-if="!bool">
        <div class="classify-left">
          <li
            @click="handoff(item)"
            v-for="(i, item) in arrList"
            :key="item"
            :class="{ yanse: item == atmitem }"
          >
            <img
              v-if="i.image_url[i.image_url.length - 2] == 'n'"
              :src="i.image_url | classifyImg"
              alt=""
            />
            <img
              v-if="i.image_url[i.image_url.length - 2] == 'e'"
              :src="i.image_url | classifyJpeg"
              alt=""
            />
            <img
              v-if="i.image_url == ''"
              src="//elm.cangdu.org/img/default.jpg"
              alt=""
            />
            <span class="goods"
              >{{ i.name }}<b>{{ i.count }}</b></span
            >
            <span class="backW" v-if="item != 0">></span>
          </li>
        </div>
        <div class="classify-right">
          <ul>
            <li v-for="(i, item) in arrGoods" :key="item" @click="eat(item)">
              <span>{{ i.name }}</span>
              <span>{{ i.count }}</span>
            </li>
          </ul>
        </div>
        <div class="bottom-gray"></div>
      </section>
      <section class="order" v-if="blue">
        <ul>
          <li @click="intell">
            <svg viewBox="0 0 33 32" id="default">
              <path
                fill="#3b87c8"
                d="M13.374 29.064a.94.94 0 0 1-.941-.941V6.476l-7.285 6.899a.942.942 0 0 1-1.299-1.364l8.876-8.424a.94.94 0 0 1 1.59.681v23.855a.94.94 0 0 1-.941.941zM20.904 29.355h-.008a.94.94 0 0 1-.375-.078.943.943 0 0 1-.559-.86V3.944a.94.94 0 1 1 1.882 0v22.287l7.238-6.842a.94.94 0 0 1 1.289 1.366l-8.818 8.338a.943.943 0 0 1-.649.264z"
              ></path>
            </svg>
            <span>智能排序</span>
          </li>
          <li @click="distance">
            <svg viewBox="0 0 32 32" id="distance">
              <path
                fill="#2a9bd3"
                d="M15.884 31.236l-.042.001a.888.888 0 0 1-.59-.224l-7.91-7.91a7.548 7.548 0 0 1-.498-.471 12.752 12.752 0 0 1-3.747-9.045C3.097 6.523 8.824.796 15.888.796s12.791 5.727 12.791 12.791c0 3.532-1.432 6.73-3.747 9.045-.196.196-.409.391-.613.578l-7.813 7.804a.886.886 0 0 1-.589.223l-.035-.001zm0-28.667C9.818 2.59 4.908 7.513 4.908 13.582c0 3.023 1.218 5.762 3.19 7.752l.461.435 7.316 7.316 7.2-7.2q.284-.249.551-.516a10.977 10.977 0 0 0 3.225-7.787c0-6.066-4.905-10.987-10.965-11.013z"
              ></path>
              <path
                fill="#2a9bd3"
                d="M15.884 18.524a5.707 5.707 0 0 1-4.07-1.732l-.001-.001a5.76 5.76 0 1 1 4.119 1.734h-.05zm-2.817-2.942a3.982 3.982 0 1 0 0-5.626c-.726.717-1.175 1.713-1.175 2.813s.449 2.096 1.175 2.813z"
              ></path>
            </svg>
            <span>距离最近</span>
          </li>
          <li @click="sales">
            <svg viewBox="0 0 23 32" id="hot">
              <path
                fill="#f07373"
                d="M9.859 29.375c-3.489-.771-6.362-3.097-7.187-5.551-.882-2.623-1.029-6.873-.238-9.318l-1.727.037.001.002.001.004.004.01.011.029.038.091c.039.09.086.191.142.3.155.304.349.627.586.955a7.477 7.477 0 0 0 2.711 2.318c.583.153.583.153 1.087-.188.187-.263.187-.263.224-.39.028-.094.041-.176.05-.28.01-.109.016-.238.022-.47.063-2.219.162-3.38.562-4.943a10.05 10.05 0 0 1 .814-2.185c1.433-2.723 4.843-6.053 6.699-7.021l-1.325-.962c-.064.382-.127.992-.131 1.722-.008 1.252.169 2.393.616 3.329.261.547.525.968 1.132 1.862l.23.339c.86 1.281 1.161 1.986 1.069 2.653l-.009.125c.069.517.069.517.781.906.451-.026.451-.026.578-.104.144-.093.144-.093.19-.136.041-.037.079-.077.123-.125.068-.076.153-.178.245-.295.22-.279.458-.615.677-.963.648-1.028 1.045-1.988 1.037-2.845l-.914.009-.706.581c.295.358.809 1.075 1.33 1.936.826 1.363 1.492 2.791 1.898 4.209 1.1 3.845.3 9.288-2.245 11.75a9.652 9.652 0 0 1-1.659 1.29 10.232 10.232 0 0 1-3.471 1.332c-.794.151-1.385.191-2.064.191h-.009a2.75 2.75 0 0 1-.373-.03 6.007 6.007 0 0 1-.585-.115 7.765 7.765 0 0 1-.536-.15l-.578 1.735a9.182 9.182 0 0 0 1.445.341c.221.031.43.048.627.048h.009a12.546 12.546 0 0 0 2.407-.224 12.011 12.011 0 0 0 4.088-1.572c.699-.431 1.358-.94 1.971-1.533 3.098-2.998 4-9.132 2.731-13.567-.455-1.591-1.188-3.161-2.092-4.653-.569-.939-1.134-1.727-1.482-2.15l-1.645-1.998.024 2.588c.004.412-.281 1.1-.756 1.853a9.64 9.64 0 0 1-.569.809 4.528 4.528 0 0 1-.158.195c.028-.027.028-.027.16-.113.122-.075.122-.075.57-.101.71.388.71.388.778.902h-.914l.906.125c.174-1.262-.261-2.281-1.362-3.922l-.235-.347c-.554-.817-.787-1.189-.995-1.624-.306-.642-.444-1.53-.438-2.53a10.566 10.566 0 0 1 .107-1.431L14.44.304l-1.628.85c-2.18 1.138-5.862 4.733-7.471 7.791a11.873 11.873 0 0 0-.967 2.583 19.2 19.2 0 0 0-.511 3.147c-.036.423-.061.839-.079 1.273-.011.281-.019.531-.029.924-.005.191-.01.298-.015.354a.403.403 0 0 1 .019-.077c.027-.099.027-.099.203-.346.492-.332.492-.332 1.112-.157a5.745 5.745 0 0 1-2.54-2.496 3.456 3.456 0 0 1-.093-.197l-.018-.044-.002-.006v.001l.001.002v.002l-.915-2.473-.812 2.51c-.917 2.836-.757 7.485.245 10.463 1.042 3.099 4.442 5.852 8.526 6.754l.395-1.785z"
              ></path>
            </svg>
            <span>销量最高</span>
          </li>
          <li @click="Prices">
            <svg viewBox="0 0 32 32" id="price">
              <path
                fill="#e6b61a"
                d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16zm0-2C8.268 30 2 23.732 2 16S8.268 2 16 2s14 6.268 14 14-6.268 14-14 14z"
              ></path>
              <path
                fill="#e6b61a"
                d="M23.14 6.06l-5.12 8.65h4.48v1.54h-5.49v2.43h5.49v1.54h-5.49v5.1h-2.02v-5.1H9.53v-1.54h5.46v-2.43H9.53v-1.54h4.45L8.8 6.06h2.24l4.99 8.48 4.93-8.48h2.18z"
              ></path>
            </svg>
            <span>起送价最低</span>
          </li>
          <li @click="velocity">
            <svg viewBox="0 0 32 32" id="speed">
              <path
                fill="#37c7b7"
                d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16zm0-2C8.268 30 2 23.732 2 16S8.268 2 16 2s14 6.268 14 14-6.268 14-14 14z"
              ></path>
              <path
                fill="#37c7b7"
                d="M15 7v11.002l5.678 4.882 1.304-1.517-5.33-4.583.348.758V6.999h-2z"
              ></path>
            </svg>
            <span>配送速度最快</span>
          </li>
          <li @click="grade">
            <svg viewBox="0 0 33 32" id="rating">
              <path
                fill="#eba53b"
                d="M27.087 31.84L16.8 25.553 6.504 31.84l2.824-11.727-9.186-7.878 12.019-.941L16.801.16l4.631 11.134 12.019.941-9.158 7.849zM16.8 23.369l7.407 4.527-2.014-8.471 6.588-5.647-8.659-.696L16.8 5.063l-3.341 8.019-8.659.696 6.588 5.647-2.014 8.471z"
              ></path>
            </svg>
            <span>评分最高</span>
          </li>
        </ul>
        <div class="bottom-grayB"></div>
      </section>
      <section class="sift" v-if="express">
        <p>配送方式</p>
        <div class="bird">
          <ul class="birdOne">
            <li v-for="(i, item) in arrbird" :key="item" @click="bird">
              <svg v-if="m != 0" viewBox="0 0 38 32" id="selected">
                <path
                  fill="#3190e8"
                  d="M32.291 2.327c.582-.582 1.455-.582 2.036 0l2.036 2.036c.582.582.582 1.455 0 2.036L13.818 29.09c-.582.582-1.455.582-2.036 0L1.455 18.908c-.582-.582-.582-1.455 0-2.036l2.036-2.036c.582-.582 1.455-.582 2.036 0l7.273 7.273L32.291 2.327z"
                ></path>
              </svg>
              <svg v-if="m == 0" viewBox="0 0 32 32" id="fengniao">
                <path
                  fill="#27a9e1"
                  d="M5.953 2.793s-.117 1.801.857 3.56c.361.255 10.458 6.218 10.458 6.218L5.953 2.794z"
                ></path>
                <path
                  fill="#b8e5fa"
                  d="M9.604.889s-.333 1.404.069 3.147c.254.307 7.801 8.116 7.801 8.116L9.604.889z"
                ></path>
                <path
                  fill="#0089cf"
                  d="M29.282 14.601l-4.861-.361s-.133-.001-.147-.226h-.002a2.652 2.652 0 0 0-2.978-2.357h-.003l-.011.001-.12.019-.004.001c-.432.075-1.812.374-3.038 1.285 0 0-.167.121-.421.33L2.665 6.043s3.254 8.665 12.207 11.98c-1.6 2.849-7.407 13.48-7.407 13.48l2.446-1.306s.775-2.853 1.884-4.957c.609-.936 1.211-.992 1.498-1.141.291-.151 3.707-.765 6.431-4.339.897-1.166 1.244-2.666 1.723-4.261.28-.061 3.008-.651 3.789-.718 1.068-.092 4.045-.181 4.045-.181z"
                ></path>
                <path
                  fill="#0089cf"
                  d="M7.392 17.849c-1.567-1.368-2.199-3.219-2.035-5.217-.232-.288-.45-.572-.654-.851-.484 2.903.555 4.854 2.176 6.269 1.538 1.342 3.635 1.85 5.466 1.577-1.674.109-3.563-.565-4.953-1.778z"
                ></path>
                <path
                  fill="#0089cf"
                  d="M12.345 19.628h.002zm-7.642-7.846c.204.279.421.563.654.851-.164 1.998.468 3.849 2.035 5.217 1.292 1.128 3.016 1.79 4.597 1.79.12 0 .238-.004.356-.011a6.554 6.554 0 0 1-.975.071c-1.568 0-3.22-.54-4.49-1.648-1.621-1.415-2.66-3.366-2.176-6.269z"
                ></path>
              </svg>
              <span>{{ i.text }}</span>
            </li>
          </ul>
        </div>
        <p>商家属性(可以多选)</p>
        <ul class="more">
          <li v-for="(i, item) in arrMore" :key="item" @click="change(item)">
            <span
              class="svg"
              v-if="i.__v == 0"
              :style="{
                color: '#' + i.icon_color,
                borderColor: '#' + i.icon_color,
              }"
              >{{ i.icon_name }}</span
            >
            <svg v-if="i.__v > 0" viewBox="0 0 38 32" id="selected">
              <path
                fill="#3190e8"
                d="M32.291 2.327c.582-.582 1.455-.582 2.036 0l2.036 2.036c.582.582.582 1.455 0 2.036L13.818 29.09c-.582.582-1.455.582-2.036 0L1.455 18.908c-.582-.582-.582-1.455 0-2.036l2.036-2.036c.582-.582 1.455-.582 2.036 0l7.273 7.273L32.291 2.327z"
              ></path>
            </svg>
            <span>{{ i.name }}</span>
          </li>
        </ul>
        <div class="tabled">
          <button class="splice" @click="spliceAll">清空</button>
          <button class="ok" @click="goNext">
            确定<span v-if="m + h > 0">({{ m + h }})</span>
          </button>
        </div>
        <div class="bottom-grayB"></div>
      </section>
    </div>
    <div class="bigbox" v-for="(item, index) in arrxuanran" :key="index">
      <div class="leftbox">
        <img :src="item.image_path | imgfilter" alt />
      </div>
      <div class="rightbox">
        <div class="shangbox">
          <p class="p1">
            <span class="logo">品牌</span>
            <span class="name">{{ item.category }}</span>
          </p>
          <p class="bao">保准票</p>
        </div>
        <div class="center">
          <p class="p2">
            <Star :num="item.rating"></Star>
            <span class="ping">{{ item.rating }}</span>
            <span class="shou">月售{{ item.recent_order_num }}单</span>
          </p>
          <p class="p3">
            <span class="feng" v-if="item.delivery_mode">{{
              item.delivery_mode.text
            }}</span>
            <span class="zhun" v-if="item.supports[1]">{{
              item.supports[1].name
            }}</span>
          </p>
        </div>
        <div class="bottonbox">
          <p class="p4">
            <span>￥{{ item.float_minimum_order_amount }}/</span>
            <span>配送费约￥{{ item.float_delivery_fee }}</span>
          </p>
          <P class="P5">
            <span class="gong">{{ item.distance }}/</span>
            <span class="time">{{ item.order_lead_time }}</span>
          </P>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Allaxios,
  classify,
  eatA,
  intellA,
  bird,
  More,
  change,
} from "../../API/index";
import star from "../star/star.vue";
import img from "../../utils/filter";
export default {
  components: {
    Star: star,
  },
  data() {
    return {
      arrxuanran: [],
      pageNumber: 0,
      pageSize: 10,
      bool: true,
      arrList: [],
      atmitem: 1,
      arrGoods: [],
      blue: false,
      pair: false,
      express: false,
      zhongleiid: "",
      arrbird: [],
      arrMore: [],
      m: 0,
      h: 0,
      arrquick: [],
      field: "",
      pinjie: "&support_ids[]=",
      pinjiehou: "",
      bianliang: "",
      by: "",
    };
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    dessert() {
      this.bool = false;
      this.blue = false;
      this.express = false;
    },
    sort() {
      this.blue = !this.blue;
      this.bool = true;
      this.express = false;
    },
    sift() {
      this.express = !this.express;
      this.bool = true;
      this.blue = false;
    },
    spliceAll() {
      this.m = 0;
      this.h = 0;
      for (var i = 0; i < this.arrMore.length; i++) {
        this.arrMore[i].__v = 0;
      }
      this.arrquick.splice(0);
      this.field = "";
    },
    async goNext() {
      var goOn = await change(
        this.zhongleiid,
        this.by,
        this.field,
        this.bianliang
      );
      console.log(goOn.data);
      this.arrxuanran = goOn.data;
      this.express = false;
      for (var i = 0; i < this.arrMore.length; i++) {
        this.arrMore[i].__v = 0;
      }
      this.arrquick.splice(0);
      this.field = "";
      if (this.m > 0) {
        this.m--;
        this.field = "";
      }
    },
    classify() {
      this.bool = true;
    },
    handoff(item) {
      this.atmitem = item;
      this.arrGoods = this.arrList[item].sub_categories.slice(1);
    },
    async intell() {
      var intells = await intellA(this.zhongleiid, 0);
      this.arrxuanran = intells.data;
      this.by = 0;
      this.blue = false;
    },
    async distance() {
      var distances = await intellA(this.zhongleiid, 5);
      this.arrxuanran = distances.data;
      this.by = 5;
      this.blue = false;
    },
    async sales() {
      var saless = await intellA(this.zhongleiid, 6);
      this.arrxuanran = saless.data;
      this.by = 6;
      this.blue = false;
    },
    async Prices() {
      var Pricess = await intellA(this.zhongleiid, 1);
      this.arrxuanran = Pricess.data;
      this.by = 1;
      this.blue = false;
    },
    async velocity() {
      var velocities = await intellA(this.zhongleiid, 2);
      this.arrxuanran = velocities.data;
      this.by = 2;
      this.blue = false;
    },
    async grade() {
      var grade = await intellA(this.zhongleiid, 3);
      this.arrxuanran = grade.data;
      this.by = 3;
      this.blue = false;
    },
    async eat(item) {
      this.zhongleiid = this.arrGoods[item].id;
      var eatS = await eatA(this.arrGoods[item].id);
      this.arrxuanran = eatS.data;
      this.bool = true;
      this.$route.query.title = this.arrGoods[item].name;
    },
    bird() {
      if (this.m == 0) {
        this.m++;
        this.field = "&delivery_mode[]=" + this.arrbird[0].id;
      } else {
        this.m--;
        this.field = "";
      }
      this.birds = !this.birds;
    },
    change(item) {
      if (this.arrMore[item].__v == 0) {
        this.arrMore[item].__v++;
        this.arrquick.push(this.pinjie + this.arrMore[item].id);
        this.bianliang = "";
        for (var i = 0; i < this.arrquick.length; i++) {
          this.bianliang += this.arrquick[i];
        }
      } else {
        this.arrMore[item].__v--;
        for (var i = 0; i < this.arrMore.length; i++) {
          if (
            this.arrquick.indexOf(this.pinjie + this.arrMore[item].id) != -1
          ) {
            this.arrquick.splice(
              this.arrquick.indexOf(this.pinjie + this.arrMore[item].id),
              1
            );
            this.bianliang = "";
            for (var i = 0; i < this.arrquick.length; i++) {
              this.bianliang += this.arrquick[i];
            }
          }
        }
      }
      this.h = 0;
      for (var i = 0; i < this.arrMore.length; i++) {
        this.h += this.arrMore[i].__v;
      }
    },
  },
  async mounted() {
    var lati = this.$route.query.lati;
    var long = this.$route.query.long;
    var res = await Allaxios(lati, long, this.pageNumber, this.pageSize);
    this.arrxuanran = this.arrxuanran.concat(res.data);
    window.addEventListener("scroll", async () => {
      if (
        Math.ceil(document.documentElement.scrollTop) + window.innerHeight ==
        document.body.offsetHeight + 29
      ) {
        this.pageNumber += 10;
        var res = await Allaxios(lati, long, this.pageNumber, this.pageSize);
        this.arrxuanran = this.arrxuanran.concat(res.data);
      }
    });
    var goods = await classify();
    this.arrList = goods.data;
    this.arrGoods = this.arrList[1].sub_categories.slice(1);
    var birds = await bird();
    this.arrbird = birds.data;
    var Mores = await More();
    this.arrMore = Mores.data;
  },
};
</script>
<style scoped>
.san {
  justify-content: start !important;
}
.posi section {
  width: 33%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3rem 0 2rem;
}

.posi section span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
}
.fenlei span {
  flex-wrap: nowrap !important;
  width: 5rem;
}
.fenlei {
  padding-left: 0rem !important;
  padding-right: 1rem !important;
}
.posi svg {
  width: 0.8rem;
  height: 0.8rem;
}
.heng {
  width: 1rem;
  height: 6rem;
}
.nameheader {
  font-weight: 700;
  font-size: 1.5rem !important;
}
header {
  height: 2.95rem;
}
header span svg {
  width: 1rem;
  height: 1rem;
}
.tabled {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
  margin-top: 0.5rem;
  padding: 0 0.3rem;
  background: #ccc;
}
.tabled button {
  width: 49%;
  border-radius: 5%;
  height: 70%;
  border: none;
  outline: none;
  font-size: 1.25rem;
}
.splice {
  color: #333;
  background: #fff;
}
.ok {
  color: #fff;
  background: #56d176;
}
.bottom-grayB {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 15.7rem;
  position: fixed;
  bottom: 0;
  z-index: 100;
}
.sift .bottom-grayB {
  height: 20.3rem;
}
.svg {
  border: 1px solid #000;
  font-size: 0.5rem;
  display: flex;
  width: 1.1rem;
  justify-content: center;
  align-items: center;
  height: 1.1rem;
  border-radius: 25%;
}
.more {
  flex-wrap: wrap;
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 5rem;
  padding: 0 0.3rem;
  align-items: center;
}
.more li {
  width: 30%;
  display: flex;
  font-size: 0.5rem;
  color: #333;
  padding: 0 2rem 0 0.3rem;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #eee;
  height: 2rem;
}
.more li span {
  text-align: left;
}
.more li span:nth-child(2) {
  display: flex;
  width: 3rem;
}
.sift {
  width: 100%;
  position: fixed;
  z-index: 10000;
  height: 19rem;
  top: 5.9rem;
  background: #fff;
}
.sift p {
  font-size: 0.4rem;
  color: #333;
  line-height: 2rem;
  height: 2rem;
  text-align: left;
  padding-left: 0.5rem;
  background-color: #fff !important;
}
.sift svg {
  width: 1rem;
  height: 1rem;
}
.sift .birdOne li {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 2rem;
  padding-left: 0.5rem;
}
.sift .birdOne {
  width: 7rem;
  justify-content: space-between;
  align-items: center;
  height: 2rem;
  border: 0.1rem solid #eee;
  display: flex;
}
.bird {
  padding-left: 0.3rem;
  box-sizing: border-box;
  font-size: 0.4rem;
  color: #333;
}
.bluecolor {
  color: #3190e8;
}
.order {
  width: 100%;
  background: #fff;
  height: 21rem;
  position: fixed;
  z-index: 1000;
  top: 5rem;
}
.order ul {
  padding-top: 1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.order ul li {
  display: flex;
  align-items: center;
  padding: 0 0.3rem;
  height: 3.35rem;
  border-bottom: 0.025rem solid #e4e4e4;
  width: 90%;
}
.order ul li span {
  font-size: 0.5rem;
}
.order ul li svg {
  width: 1rem;
  height: 1rem;
  margin-right: 1rem;
}
.classify-right ul {
  overflow: auto;
  padding-top: 1rem;
  height: 23rem;
}
.classify-right ul li {
  padding: 0 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  border-bottom: 1px solid #ccc;
}
.classify-right ul li span {
  color: #666;
  font-size: 0.5rem;
}
.classifyBlue {
  color: #3190e8;
}
.backW {
  color: #ccc;
}
.classify-left .goods {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.yanse {
  background: #fff;
}
.classify-left img {
  width: 1rem;
  height: 1rem;
}
.classify-left li {
  height: 2.4rem;
  display: flex;
  justify-content: space-between;
  padding: 0 0.9rem;
  align-items: center;
}
.classify-left b {
  background: #333;
  opacity: 0.5;
  width: 2rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1rem;
  color: #fff;
  font-size: 0.12rem;
}
.classify {
  position: fixed;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  top: 5rem;
  left: 0;
  height: 23rem;
  width: 100%;
}
.bottom-gray {
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 13.7rem;
  position: fixed;
  bottom: 0;
  z-index: 100;
}
.classify-left {
  padding-top: 1rem;
  box-sizing: border-box;
  width: 50%;
  height: 23rem;
  background: #f5f5f5;
}
header span {
  color: #fff;
}
.classify-right {
  background: white;
  width: 50%;
  height: 23em;
  z-index: 1000;
}
</style>
<style scoped >
img {
  width: 4.2rem;
}
.P5 {
  display: flex;
  align-items: center;
}
.time {
  color: #3190e8;
  font-size: 10px;
}
.gong {
  font-size: 10px;
}
.bottonbox {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.p4 {
  display: flex;
  align-items: center;
  font-size: 12px;
}
.zhun {
  font-size: 12px;
  height: 0.9rem;
  color: #3190e8;
  border: 1px solid #3190e8;
  margin-left: 0.05rem;
  display: flex;
  align-items: center;
}
.feng {
  display: inline-block;
  height: 0.9rem;
  background: #3190e8;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}
.shou {
  font-size: 12px;
}
.ping {
  font-size: 12px;
  color: #ff6000;
}
.p2 {
  width: 9rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.p2 img {
  width: 0.3rem;
}
.p3 {
  display: flex;
}
.p1 {
  height: 100%;
  display: flex;
  align-items: center;
}
.center {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.shangbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 0.6rem;
}
.bao {
  font-size: 12px;
}
.name {
  width: 6rem;
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logo {
  font-size: 0.12rem;
  background: #ffd930;
  height: 0.9rem;
  border-radius: 0.18rem;
  display: inline-block;
  margin-right: 0.2rem;
}
.leftbox {
  float: left;
}
.rightbox {
  height: 100%;
  width: 16.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.bigbox {
  width: 100%;
  height: 6rem;
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0.2rem;
}
.topbox {
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  font-size: 0.2rem;
  padding-left: 0.16rem;
  color: #ccc;
  margin-top: 2.4rem;
}
.topbox img {
  width: 1.2rem;
  vertical-align: middle;
  margin-right: 0.1rem;
}
.heng .posi {
  position: fixed;
  top: 2.9rem;
  width: 100%;
  height: 3rem;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  background: #f5f5f5;
  z-index: 10000;
  display: flex;
  justify-content: space-between;
  padding: 0 0.3rem;
}
</style>


